
<template>
    <div class="app-container">
        <levelbar></levelbar>
        <div class="tableBox">
            <div class="table-title" slot="table-title">

                    <div class="formBtn">
                        <div class="btnPosition">
                            <el-button  @click="goback">返回</el-button>
                            <el-button  @click="addLeader">新增</el-button>
                        </div>
                    </div>
            </div>
            <el-table :data="dataApply" border style="width:100%" ref="singleTable" v-loading="loading">

                <el-table-column label="负责人姓名" align="center" >
                        <template scope="scope">
                            <span>{{scope.row.name | isNull}}</span>
                        </template> 
                </el-table-column>
               
                <el-table-column label="e学云ID号" align="center" >
                        <template scope="scope">
                            <span>{{scope.row.exueCode | isNull}}</span>
                        </template>
                </el-table-column>

                <el-table-column label="手机号码" align="center" >
                        <template scope="scope">
                            <span>{{scope.row.phone | isNull}}</span>
                        </template>
                </el-table-column>

                <el-table-column label="负责人身份证号" align="center" >
                        <template scope="scope">
                            <span>{{scope.row.sIdentityId | isNull}}</span>
                        </template>
                </el-table-column>

                <el-table-column label="创建时间" align="center" width="170" >
                        <template scope="scope">
                            <span>{{scope.row.createTime | isNull}}</span>
                        </template>
                </el-table-column>

                <el-table-column label="创建人" align="center" >
                        <template scope="scope">
                            <span>{{scope.row.creator | isNull}}</span>
                        </template>
                </el-table-column>

                <el-table-column align="center" label="状态"  width="80">
                    <template scope="scope">
                        <span v-if="scope.row.status==0">启用</span>
                        <span v-if="scope.row.status==1">禁用</span>
                    </template>
                </el-table-column>

                <el-table-column align="center" label="初始化密码" width="160">
                    <template scope="scope">
                        <el-button type="text" class="btn-success" @click="initializtion(scope.row)">初始化密码</el-button>
                    </template>
                </el-table-column>

                <el-table-column align="left" label="操作" width="200">
                    <template scope="scope">
                        <el-button type="text" class="btn-success" @click="revise(scope.row.id,scope.row.name,scope.row.phone, scope.row.sIdentityId)">修改</el-button>
                        <el-button type="text" class="btn-success" v-if="scope.row.status==0" @click="forbiden(scope.row)" :disabled="uid==scope.row.id">禁用</el-button>
                        <el-button type="text" class="btn-success" v-if="scope.row.status==1" @click="awaken(scope.row)">启用</el-button>
                        <el-button type="text" class="btn-success" @click="deleteRow(scope.row)" :disabled="uid==scope.row.id" >删除</el-button>
                    </template>
                </el-table-column>               
            </el-table> 
            <div class="pagination-container">
                <p>* 一所学校至多可以增加 5 位负责人，学校负责人拥有e学云教育平台的超级管理权限。</p>      
            </div>  
        </div>
        <addSchoolLeader :dialog="dialog" :dataForm1="dataForm1" @addSuccess='addSuccess' @reviseSuccess='reviseSuccess'></addSchoolLeader>
    </div>
</template>

<script>
import Levelbar from '../layout/Levelbar';
import {listSchoolOwnerBySchoolId, updatePassword, updateSchoolOwnerStatus, removeSchoolOwner} from 'api/schoolManage';
import TableLayout from 'components/TableLayout';
import addSchoolLeader from './comps/addSchoolLeader';
import { mapState, mapActions, mapGetters } from 'vuex';
import Cookies from 'js-cookie';
export default{
    components: {TableLayout, Levelbar, addSchoolLeader},
    data() {
        return {
            dataApply: [],
            disabled: false,
            loading: true,
            dialog: {
                dialogFormVisible1: false,
                dialogFormVisible2: false
            },
            isTrue: true,
            dataForm1: {
                schoolId: '',
                id: '',
                realname: '',
                phoneNum: ''
            }
        }
    },
    computed: {
        ...mapState({
            config: state => state.config.table
        }),
        ...mapGetters([
            'uid'
        ])
        // formatDisable(val) {
        //     val.$data.dataApply.forEach(item => {
        //         if (item.status === '1') {
        //             count++;
        //         }
        //     });
        //     val.$data.dataApply.forEach(item => {
        //         if (count === 1) {
        //             if (item.status === '1') {
        //                 return true;
        //             } else {
        //                 return false;
        //             }
        //         }
        //     });
        // }
    },
    created() {
        this.searchFetchData();
        this.dataForm1.schoolId = this.$route.params.schoolId;
    },
    
    methods: {
        ...mapActions(['ChangePageSize']),
        searchFetchData() {
            listSchoolOwnerBySchoolId(this.$route.params.schoolId).then(response => {
                this.dataApply = response.data.content;
                this.loading = false;
                this.getIsTrue();
            });
            
        },
        setCurrent(row) {
            this.$refs.singleTable.setCurrentRow(row);
        },
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.loading = true;
            this.ChangePageSize(val);
            this.searchFetchData();
        },
        // handleCurrentChange(val) {
        //     this.loading = true;
        //     this.searchFetchData();
        // },
        formatDisable() {
            return
        },
        // 删除
        deleteRow(rows) {
            if (this.uid==rows.id) {
                this.$confirm('删除个人账号将会退出重新登录?', ' ', {
                    cancelButtonText: '取消',
                    confirmButtonText: '确定'
                }).then(() => {
                    removeSchoolOwner(this.$route.params.schoolId, rows.id).then(response => {
                        this.loading = true;
                        this.searchFetchData();
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        setTimeout(() => {
                            Cookies.remove('uid');
                            Cookies.remove('accessToken');
                            Cookies.remove('userType');
                            location.reload();
                        }, 500)
                    }); 
                })
            } else {
                this.$confirm('确定要删除此账号?', ' ', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(() => {
                    removeSchoolOwner(this.$route.params.schoolId, rows.id).then(response => {
                        this.loading = true;
                        this.searchFetchData();
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        })
                    });  
                })
            }
            
        },
        // 初始化密码
        initializtion(row) {
            this.$confirm('确定要初始化【'+row.name+'】的密码吗?', ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                updatePassword(row.id, row.phone).then(response => {
                    this.$message({
                        type: 'success',
                        message: '初始化密码成功，初始密码为111111'
                    })
                });  
            })
        },
        // 禁用负责人账号
        forbiden(row) {
            if (this.uid==row.id) {
                this.$confirm('禁用个人账号将会退出重新登录?', ' ', {
                    cancelButtonText: '取消',
                    confirmButtonText: '确定'
                }).then(() => {
                    updateSchoolOwnerStatus(this.$route.params.schoolId, row.id, 1).then(response => {
                        this.loading = true;
                        this.searchFetchData();
                        this.$message({
                            type: 'success',
                            message: '禁用负责人账号成功!'
                        });
                        setTimeout(() => {
                            Cookies.remove('uid');
                            Cookies.remove('accessToken');
                            Cookies.remove('userType');
                            location.reload();
                        }, 500)
                    });
                })
            } else {
                this.$confirm('确定要禁用该负责人账号吗?', ' ', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(() => {
                    updateSchoolOwnerStatus(this.$route.params.schoolId, row.id, 1).then(response => {
                        this.loading = true;
                        this.searchFetchData();
                        this.$message({
                            type: 'success',
                            message: '禁用负责人账号成功!'
                        })
                        // console.log('AAA')
                    });  
                })
            }
        },
        // 启用负责任账号
        awaken(row) {
            this.$confirm('确定要启用负责人账号吗?', ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                updateSchoolOwnerStatus(this.$route.params.schoolId, row.id, 0).then(response => {
                    this.loading = true;
                    this.searchFetchData();
                    this.$message({
                        type: 'success',
                        message: '启用负责人账号成功!'
                    })
                });  
            })
        },
        onSubmit() {// 表单查询
            this.loading = true;
            this.searchFetchData();
        },
        // 添加成功
        addSuccess() {
            this.searchFetchData();
            this.dialog.dialogFormVisible1 = false
        },
        // 修改成功
        reviseSuccess() {
            this.searchFetchData();
        },
        goback() {
            this.$router.push({path: '/schoolManage/schoolManages'});
        },
        getIsTrue() {
            let state = 0;
            this.dataApply.map(item => {
                if (item.status == 0) state++;
            })
            if (state> 1) {
                this.isTrue=true;  
            } else {
                this.isTrue=false;
            }
           
        },
        addLeader() {
            if (this.dataApply.length >= 5) {
                this.$message({
                    type: 'warning',
                    message: '最多可以添加5个管理员账号！'
                })
                return;
            }
            this.dialog.dialogFormVisible1=true;
        },
        // 修改
        revise(id, realName, phone, sIdentityId) {
            this.dataForm1.id = id;
            this.dataForm1.realname = realName;
            this.dataForm1.phoneNum = phone;
            this.dataForm1.sIdentityIdedit = sIdentityId
            this.dialog.dialogFormVisible2=true;
        }
    }
}
</script>

<style lang="scss" scoped>
.app-container {
    padding: 20px 20px 10px;
    .tableBox{
        padding: 0 20px 30px;
        background: #fff;
        box-shadow:0px 0px 5px 0px rgba(0, 0, 0, 0.1); 
        -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    }
    .pagination-container p{
        color:#b2b2b2;
        font-size:14px;
        margin-top:25px;
    }
    .formBtn{
        width: 100%;
        padding: 13px 0;
    }
}

</style>
